<template>
  <div class="shop_nav_c ">
    <div v-if="categroyList.length != 0" class="list_nav">
      <ul>
        <li v-for="(item, index) in categroyList" :key="index">
          <div class="list_name">
            <a href="javascript:;" class="list_nm" @click="goProductListFn(item.categoryName)">{{ item.categoryName }}
              <span class="list_usepng list_icona"><img src="../../assets/image/chevron-right.png" alt=""></span>
            </a>
            <div class="list_cont" style="display: none;">
              <div v-for="(item2, index2) in item.childTreeDto" :key="index2 + '_2'" class="list_lt">
                <div class="list_lta">
                  <p>
                    <a href="javascript:;" @click="goProductListFn(item2.categoryName)">{{ item2.categoryName }}</a>
                  </p>
                  <ul class="clearfix">
                    <li v-for="(item3, index3) in item2.childTreeDto" :key="index3 + '_3'">
                      <a href="javascript:;" @click="goProductListFn(item3.categoryName)">{{ item3.categoryName }}</a>
                    </li>
                  </ul>
                </div>
              </div>

            </div>
          </div>
        </li>
      </ul>

    </div>
    <div v-else class="list_nav loading-class">
      <div v-loading="categroyList.length == 0" />
    </div>
  </div>
</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'
import _api from '@/api/homePage'
export default {
  name: 'CategroyIndex',
  components: {},

  data() {
    return {
      loading: true,
      categroyList: [] // 分类数据
    }
  },

  computed: {

  },
  watch: {
    '$store.state.procductShopping.catoryTressData': {
      handler(newVal) {
        this.categroyList = newVal
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
    // this.categroyFn()
    console.log('222获取store的值', this.$store.getters.catoryTressData)
    this.categroyList = this.$store.getters.catoryTressData
  },
  methods: {

    // 分类信息
    categroyFn(id) {
      const params = {
      }
      _api.categroyTreeList(this, params, this.callBack_categoryDesc)
    },
    callBack_categoryDesc(data) {
      if (_validate.checkEmpty(data)) {
        _validate.openTip(this, '获取超时，请稍后重试', 'warning')
      } else {
        this.categroyList = data.data

        // this.$store.commit('SET_CATORYTRESSDATA',data.data)
      }
    },
    goProductListFn(name) {
      const newPage = this.$router.resolve({
        path: '/homePage/productList',
        query: {
          id: name
        }
      })
      window.open(newPage.href, '_blank')
    }
  }
}
</script>
<style lang="scss">
.shop_nav_c {
  flex: 2;
  height: 400px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #FFF;

  color: #666666;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  max-height: 400px;

  .loading-class {
    transform: translate(0, 50%);
  }

  .list_nav {
    position: relative;
    float: left;
    width: 235px;
    height: 400px;

    li:hover {
      cursor: pointer;
    }
    li:hover a.list_nm{
      background: #F5F8FB;
      color: rgb(64, 158, 254);
    }

    li {
      list-style: none;
      z-index: 111;
      margin: 0;
      padding: 0;

      .list_name:hover {
        .list_cont {
          display: block !important;
        }
      }

      .list_name {

        text-decoration: none;
        font-family: "\5FAE\8F6F\96C5\9ED1";
        color: #494949;
        .list_nm {
          font-size: 14px;
          position: relative;
          display: block;
          box-sizing: content-box;
          padding: 4px 0 5px 19px;

          .list_icona {
            width: 16px;
            height: 16px;
            position: absolute;
            right: 19px;
            top: 7px;
            background-position: -84px -36px;
            display: inline-block;

            img {
              width: 100%;
              height: 100%;
            }

          }
        }

        .list_cont {
          width: 964px;
          background: #fff;
          position: absolute;
          left: 236px;
          border-right: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;
          padding: 20px 22px 20px 22px;
          z-index: 333;
          min-height: 400px;
          height: 410px;
          color: #666;
          border-radius: 12px;
          top: -6px;
          overflow-x: hidden;
          overflow-y: auto;

          .list_lt {
            float: left;
            margin-bottom: 20px;
            width: 100%;
            .list_lta {
              p {
                color: #494949;
                float: left;
                overflow: hidden;
                width: 119px;
                background: url('../../assets/image/chevron-right.png') no-repeat right center;
                padding-right: 20px;
                line-height: 20px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                font-weight: 600;
                margin: 0;
                padding: 0;
                a{
                  font-size: 14px;
                }
              }

              ul {
                margin-left: 119px;
                padding-bottom: 5px;

                li {
                  font-size: 12px;
                  float: left;
                  line-height: 20px;
                  height: 20px;
                  zoom: 1;

                  a {
                    border-left: 1px solid #e5e5e5;
                    padding-left: 12px;
                    padding-right: 12px;
                    white-space: nowrap;
                  }
                }
                li:hover a{
                  color: rgb(64, 158, 254);
                }
              }
            }
          }
        }

      }

    }
  }
}
</style>
